<template>
    <div id="WishRecommend">
        <WishRecommendHeader></WishRecommendHeader>
        <div id="content">
            <el-divider content-position="left"><i class="el-icon-position"></i> 志愿推荐</el-divider>
            <div class="recommend">
                <el-button :class="{active:scoreDiv}" @click="scoreDiv=true,rankDiv=false"><i class="el-icon-reading"></i> 根据分数推荐学校</el-button>
                <el-button :class="{active:rankDiv}" @click="scoreDiv=false,rankDiv=true"><i class="el-icon-data-analysis"></i> 根据排名推荐学校</el-button>

                <div class="recommendType">
                    <div v-show="scoreDiv">
                        <el-divider content-position="center" ><i class="el-icon-reading"></i> 根据分数推荐学校</el-divider>
                    </div>
                    <div v-show="rankDiv">
                        <el-divider content-position="center" ><i class="el-icon-data-analysis"></i> 根据排名推荐学校</el-divider>
                    </div>
<!--                    根据条件推荐学校表单-->
                    <div class="recommendConditionDiv">
                        <el-row>
                            <el-col :span="16">
                                <el-form :model="recommendConditionForm">
                                    <el-form-item prop="score" v-show="scoreDiv">
                                        <span>高考分数 > </span>
                                        <el-input v-model="recommendConditionForm.score"  placeholder="请输入0~900范围内的分数" style="width: 220px"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="rank" v-show="rankDiv">
                                        <span>高考排名 > </span>
                                        <el-input v-model="recommendConditionForm.rank"  placeholder="请输入0~400000范围内的排名" style="width: 220px"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="province">
                                        <span>所在省份 ></span>
                                        <span>
                                <el-select v-model="recommendConditionForm.province" placeholder="省份" >
                                    <el-option v-for="province in provinces" :value=province>{{province}}</el-option>
                                </el-select>
                                </span>
                                    </el-form-item>
                                    <el-form-item prop="examType" >
                                        <span>考试类型 ></span>
                                        <span>
                                    <el-radio-group v-model="recommendConditionForm.examType">
                                        <el-radio label="理科"></el-radio>
                                        <el-radio label="文科"></el-radio>
                                    </el-radio-group>
                                </span>
                                    </el-form-item>
                                    <el-form-item prop="admitProbability" >
                                        <span>录取概率 ></span>
                                        <span>
                                    <el-radio-group v-model="recommendConditionForm.admitProbability">
                                        <el-radio label="全部"></el-radio>
                                        <el-radio label="冲刺"></el-radio>
                                        <el-radio label="稳妥"></el-radio>
                                        <el-radio label="保底"></el-radio>
                                    </el-radio-group>
                                </span>

                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <el-popover
                                            placement="top"
                                            title="温馨提示"
                                            width="240"
                                            trigger="hover"
                                            content="本平台推荐的学校名单仅供志愿参考  具体的数据请以学校官网或考试院公布为准">
                                        <el-button class="recommendBtn" @click="recommendCollege()" slot="reference">推 荐 学 校</el-button>
                                    </el-popover>

                                </div>
                            </el-col>
                        </el-row>

                    </div>

                    <div class="recommendResult" v-show="recommendResultCollegeList.length != 0">
                        <el-divider content-position="center" ><i class="el-icon-finished"></i> 推荐结果列表</el-divider>
                        <div style="margin:50px">
                            <el-row>
                                <el-col :span="16">
                                    <span >共推荐了{{total}}所学校,当前第{{currentPage}}页</span><br/>
                                    <p style="color: #5dabf7">(点击学校列表可查看具体学校信息)</p>
                                    <p style="color: #5dabf7">(勾选末尾框可进行学校对比,最少勾选2所学校对比，最多勾选5所学校对比)</p>
                                </el-col >

                                <el-col :span="8">

                                    <el-button style="float: right;border: #cfecc1 solid 1px" @click="CollegeCompared()"><i class="el-icon-c-scale-to-original"></i> 学校对比</el-button>
                                </el-col>
                            </el-row>


                        </div>
                        <div class="recommendResultList" >
                            <el-table ref="multipleTable" @selection-change="handleSelectionChange" @select ="selectRows" @select-all="selectALLRows" :data="recommendResultList" stripe style="width: 100%" @row-click ="tabelRowClick">

                                <el-table-column type="index" label="序号" width="50"></el-table-column>
                                <el-table-column label="logo" width="100">
                                    <template  scope="scope">
                                        <img :src="recommendResultCollegeList[scope.$index].avatar" style="width: 50px;height: 50px">
                                    </template>
                                </el-table-column>
                                <el-table-column prop="collegeName" label="大学推荐" width="150"></el-table-column>
                                <el-table-column label="所在地区" width="150">
                                    <template  scope="scope">
                                        {{recommendResultCollegeList[scope.$index].region}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="办学类型" width="120">
                                    <template  scope="scope">
                                        {{recommendResultCollegeList[scope.$index].startType}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="学校类型" width="120">
                                    <template  scope="scope">
                                        {{recommendResultCollegeList[scope.$index].collegeType}}
                                    </template>
                                </el-table-column>

                                <el-table-column prop="province" label="录取省份" width="110"></el-table-column>
                                <el-table-column prop="examType" label="录取类型" width="110"></el-table-column>
                                <el-table-column prop="lowestScore" label="历年最低分数平均分" width="100"></el-table-column>
                                <el-table-column prop="lowestRank" label="历年最低平均排位" width="100"></el-table-column>
                                <el-table-column label="录取概率" >
                                    <template  scope="scope">
                                        <el-tag v-if="scoreDiv"
                                                :type="Math.abs(recommendConditionScore.score-recommendResultList[scope.$index].lowestScore) <= 10 ? 'danger':
                                                  Math.abs(recommendConditionScore.score-recommendResultList[scope.$index].lowestScore) >= 30 ?
                                                  'success' : '' "
                                                style="height: 40px;padding: 5px"
                                                disable-transitions>
                                            <span v-text="Math.abs(recommendConditionScore.score-recommendResultList[scope.$index].lowestScore) <= 10 ? '冲刺':
                                                  Math.abs(recommendConditionScore.score-recommendResultList[scope.$index].lowestScore) >= 30 ?
                                                  '保底':'稳妥'"></span>
                                        </el-tag>
                                        <el-tag v-if="rankDiv"
                                                :type="Math.abs(recommendConditionRank.rank-recommendResultList[scope.$index].lowestRank) <= 1000 ? 'danger':
                                                  Math.abs(recommendConditionRank.rank-recommendResultList[scope.$index].lowestRank) >= 3000 ?
                                                  'success' : '' "
                                                style="height: 40px;padding: 5px"
                                                disable-transitions>
                                            <span v-text="Math.abs(recommendConditionRank.rank-recommendResultList[scope.$index].lowestRank) <= 1000 ? '冲刺':
                                                  Math.abs(recommendConditionRank.rank-recommendResultList[scope.$index].lowestRank) >= 3000 ?
                                                  '保底' : '稳妥' "></span>
                                        </el-tag>

                                    </template>
                                </el-table-column>
                                <el-table-column type="selection" width="50"></el-table-column>
                            </el-table>
                            <!--分页-->
                            <el-pagination layout="prev, pager, next"
                                           style="margin: 10px auto;text-align: center"
                                           :current-page="currentPage"
                                           :page-size="pageSize"
                                           :total="total"
                                           @current-change="page">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider content-position="center" >&copy; 2020 </el-divider>
        </div>

        <!-- 学校对比-->
        <el-dialog title="学校对比" :visible.sync="collegeComparedVisible" modal="flase" width="96%">
            <div class="collegeComparedList" style="margin-top: 20px">

                <el-divider content-position="center" ><i class="el-icon-c-scale-to-original"></i> 学校对比列表</el-divider>
                <div class="List" >
                    <el-table :data="collegeComparedList" stripe style="width: 96%;margin: 32px">
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column label="logo" width="100">
                            <template  scope="scope">
                                <img :src="collegeComparedCollegeList[scope.$index].avatar" style="width: 50px;height: 50px">
                            </template>
                        </el-table-column>
                        <el-table-column prop="collegeName" label="大学推荐" width="150"></el-table-column>
                        <el-table-column label="隶属" width="80">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].attach}}
                            </template>
                        </el-table-column>
                        <el-table-column label="所在省份" width="80">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].province}}
                            </template>
                        </el-table-column>
                        <el-table-column label="所在地区" width="100">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].region}}
                            </template>
                        </el-table-column>
                        <el-table-column label="办学类型" width="80">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].startType}}
                            </template>
                        </el-table-column>
                        <el-table-column label="学校类型" width="80">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].collegeType}}
                            </template>
                        </el-table-column>
                        <el-table-column label="学校标签" width="180">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].collegeTag}}
                            </template>
                        </el-table-column>
                        <el-table-column label="建校时间" width="80">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].foundYear}}
                            </template>
                        </el-table-column>
                        <el-table-column label="学校地址" width="220">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].address}}
                            </template>
                        </el-table-column>

                        <el-table-column label="人气值" width="80">
                            <template  scope="scope">
                                {{collegeComparedCollegeList[scope.$index].popularityValue}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="province" label="录取省份" width="80"></el-table-column>
                        <el-table-column prop="examType" label="录取类型" width="80"></el-table-column>
                        <el-table-column prop="lowestScore" label="历年最低分数平均分" width="100"></el-table-column>
                        <el-table-column prop="lowestRank" label="历年最低平均排位" width="80"></el-table-column>
                        <el-table-column label="录取概率" >
                            <template  scope="scope">
                                <el-tag v-if="scoreDiv"
                                        :type="Math.abs(recommendConditionScore.score-collegeComparedList[scope.$index].lowestScore) <= 10 ? 'danger':
                                                  Math.abs(recommendConditionScore.score-collegeComparedList[scope.$index].lowestScore) >= 30 ?
                                                  'success' : '' "
                                        style="height: 40px;padding: 5px"
                                        disable-transitions>
                                            <span v-text="Math.abs(recommendConditionScore.score-collegeComparedList[scope.$index].lowestScore) <= 10 ? '冲刺':
                                                  Math.abs(recommendConditionScore.score-collegeComparedList[scope.$index].lowestScore) >= 30 ?
                                                  '保底':'稳妥'"></span>
                                </el-tag>
                                <el-tag v-if="rankDiv"
                                        :type="Math.abs(recommendConditionRank.rank-collegeComparedList[scope.$index].lowestRank) <= 1000 ? 'danger':
                                                  Math.abs(recommendConditionRank.rank-collegeComparedList[scope.$index].lowestRank) >= 3000 ?
                                                  'success' : '' "
                                        style="height: 40px;padding: 5px"
                                        disable-transitions>
                                            <span v-text="Math.abs(recommendConditionRank.rank-collegeComparedList[scope.$index].lowestRank) <= 1000 ? '冲刺':
                                                  Math.abs(recommendConditionRank.rank-collegeComparedList[scope.$index].lowestRank) >= 3000 ?
                                                  '保底' : '稳妥' "></span>
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import WishRecommendHeader from "../components/WishRecommendHeader";
    import wish_recommend from "../api/wish_recommend";
    export default {
        name: "WishRecommend",
        components: {WishRecommendHeader},
        created() {},
        data(){
           return{
               scoreDiv:true,
               rankDiv:false,
               provinces:["北京","天津","河北","河南","山东","山西","陕西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","安徽","江西","湖北","湖南",
                            "重庆","四川","贵州","云南", "广东","广西","福建","甘肃","宁夏","新疆","西藏","海南","浙江","青海"],
               recommendConditionForm:{score:null,rank:null,province:null,examType:null,admitProbability:null},
               recommendConditionScore:null,
               recommendConditionRank:null,

               recommendResultList:[],
               recommendResultCollegeList:[],
               //分页数据
               currentPage: 1,
               total: 0,
               pageSize: 10,
               //高校对比列表
               collegeComparedList:[],
               collegeComparedVisible:false,
               collegeComparedCollegeList:[]


           }
        },
        methods:{
            //推荐学校
            recommendCollege() {
                        // console.log(this.recommendConditionForm)
                        // console.log(this.recommendConditionScore)
                        if(this.scoreDiv){
                            //根据分数
                            if (this.recommendConditionForm.score===null||this.recommendConditionForm.score===""||this.recommendConditionForm.province===null||
                                this.recommendConditionForm.examType===null||this.recommendConditionForm.admitProbability===null){
                                //验证表单数据
                                this.$notify.warning({title: '信息输入不完整', message: '请输入完整的信息，再点击推荐按钮', duration: 2500});
                            }else if(/^\d+$/.test(this.recommendConditionForm.score) === false){
                                this.$notify.error({title: '信息输入错误', message: '请输入正确的分数信息，再点击推荐按钮', duration: 2500});
                            } else if(Number(this.recommendConditionForm.score) < 0 || Number(this.recommendConditionForm.score) > 900){
                                this.$notify.warning({title: '高考分数不在要求范围内', message: '请输入0~900范围内的分数，再点击推荐按钮', duration: 2500});
                            }else{
                                //发请求
                                let vm = this
                                wish_recommend.WishRecommendByScore(vm.recommendConditionForm,1).then(function (response) {
                                    // console.log(response)
                                    if (response.data.code === 200){
                                        //推荐成功
                                        // console.log(response.data.data)
                                        var data = response.data.data
                                        vm.recommendResultList = data.ipage.records
                                        vm.recommendResultCollegeList = data.collegeList
                                        // console.log(vm.recommendResultList)
                                        // console.log(vm.recommendResultCollegeList)
                                        vm.currentPage = data.ipage.current
                                        vm.total = data.ipage.total
                                        vm.pageSize = data.ipage.size

                                        vm.$notify.success({title: '学校已成功推荐', message: '请查看推荐结果', duration: 2500});

                                        vm.recommendConditionScore = vm.recommendConditionForm
                                    }else {
                                        //推荐失败
                                        if (response.data.code === 201){
                                            vm.recommendResultList = []
                                            vm.recommendResultCollegeList = []
                                            vm.$notify.info({title: '很遗憾！', message: '暂无满足你的学校推荐', duration: 2500});
                                        }

                                    }
                                })

                            }
                        }else{
                            //根据排名
                            if (this.recommendConditionForm.rank===null||this.recommendConditionForm.rank===""||this.recommendConditionForm.province===null||
                            this.recommendConditionForm.examType===null||this.recommendConditionForm.admitProbability===null){
                                //验证表单数据
                                this.$notify.warning({title: '信息输入不完整', message: '请输入完整的信息，再点击推荐按钮', duration: 2500});
                            }else if(/^\d+$/.test(this.recommendConditionForm.rank) === false){
                                this.$notify.error({title: '信息输入错误', message: '请输入正确的排名信息，再点击推荐按钮', duration: 2500});
                            } else if(Number(this.recommendConditionForm.rank) < 0 || Number(this.recommendConditionForm.rank) > 400000){
                                this.$notify.warning({title: '高考排名输入不在要求范围内', message: '请输入0~400000范围内的排名，再点击推荐按钮', duration: 2500});
                            } else{
                                //发请求
                                let vm = this
                                wish_recommend.WishRecommendByRank(vm.recommendConditionForm,1).then(function (response) {
                                    // console.log(response)
                                    if (response.data.code === 200){
                                        //推荐成功
                                        // console.log(response.data.data)
                                        var data = response.data.data
                                        vm.recommendResultList = data.ipage.records
                                        vm.recommendResultCollegeList = data.collegeList
                                        // console.log(vm.recommendResultList)
                                        // console.log(vm.recommendResultCollegeList)
                                        vm.currentPage = data.ipage.current
                                        vm.total = data.ipage.total
                                        vm.pageSize = data.ipage.size

                                        vm.$notify.success({title: '学校已成功推荐', message: '请查看推荐结果', duration: 2500});

                                        vm.recommendConditionRank = vm.recommendConditionForm
                                    }else {
                                        //推荐失败
                                        if (response.data.code === 201){
                                            vm.recommendResultList = []
                                            vm.recommendResultCollegeList = []
                                            vm.$notify.info({title: '很遗憾！', message: '暂无满足你的学校推荐', duration: 2500});
                                        }
                                    }
                                })
                            }
                        }
            },
            page(currentPage){
                if(this.scoreDiv){
                    //根据分数

                        let vm = this
                        // console.log(vm.recommendConditionForm)
                        // console.log(vm.recommendConditionScore)

                        wish_recommend.WishRecommendByScore(vm.recommendConditionScore,currentPage).then(function (response) {
                            // console.log(response)
                            if (response.data.code === 200){
                                //推荐成功
                                // console.log(response.data.data)
                                var data = response.data.data

                                vm.recommendResultList = data.ipage.records
                                vm.recommendResultCollegeList = data.collegeList

                                // console.log(vm.recommendResultList)
                                // console.log(vm.recommendResultCollegeList)
                                vm.currentPage = data.ipage.current
                                vm.total = data.ipage.total
                                vm.pageSize = data.ipage.size
                                vm.$notify.success({title: '数据已成功加载', message: '请查看推荐结果', duration: 2500});


                            }else {
                                //推荐失败
                                if (response.data.code === 201){
                                    vm.recommendResultList = []
                                    vm.recommendResultCollegeList = []
                                    vm.$notify.info({title: '很遗憾！', message: '暂无满足你的学校推荐', duration: 2500});
                                }

                            }
                        })
                }else{
                    //根据排名
                        //发请求
                        let vm = this
                        // console.log(vm.recommendConditionForm)
                        // console.log(vm.recommendConditionRank)
                        wish_recommend.WishRecommendByRank(vm.recommendConditionRank,currentPage).then(function (response) {
                            // console.log(response)
                            if (response.data.code === 200){
                                //推荐成功
                                // console.log(response.data.data)
                                var data = response.data.data
                                vm.recommendResultList = data.ipage.records
                                vm.recommendResultCollegeList = data.collegeList
                                vm.currentPage = data.ipage.current
                                vm.total = data.ipage.total
                                vm.pageSize = data.ipage.size
                                // console.log(vm.recommendResultList)
                                // console.log(vm.recommendResultCollegeList)
                                vm.$notify.success({title: '数据已成功加载', message: '请查看推荐结果', duration: 2500});

                            }else {
                                //推荐失败
                                if (response.data.code === 201){
                                    vm.recommendResultList = []
                                    vm.recommendResultCollegeList = []
                                    vm.$notify.info({title: '很遗憾！', message: '暂无满足你的学校推荐', duration: 2500});
                                }
                            }
                        })
                    }
                },
            tabelRowClick(row, event, column){
                // console.log(this.recommendResultCollegeList)
                // console.log(row.collegeName)
                let no = true
                for (let i = 0 ; i < this.recommendResultCollegeList.length ; i++) {
                    if(this.recommendResultCollegeList[i].collegeName === row.collegeName){
                        this.$store.commit("SET_COLLEGE",this.recommendResultCollegeList[i])
                        console.log(this.$store.getters.GET_COLLEGE)
                        window.open(this.$router.resolve("/collegeDetails").href, '_blank');
                        no = false
                    }
                }
                if (no){
                    this.$notify.warning({title: '该学校信息暂不完整', message: '请选择其他学校查看', duration: 6000});
                }
            },
            CollegeCompared() {

                if (this.collegeComparedList.length < 2){
                    this.$notify.warning({title: '最少选择2个学校进行对比', message: '请重新选择学校对比', duration: 2000});
                }else if (this.collegeComparedList.length > 5){
                    this.$notify.warning({title: '最多选择5个学校进行对比', message: '请重新选择学校对比', duration: 2000});
                }else{
                    // console.log(this.recommendResultCollegeList)
                    console.log(this.collegeComparedList)
                    console.log(this.collegeComparedCollegeList)
                    this.collegeComparedCollegeList=[]
                    for (let i = 0 ;i < this.recommendResultCollegeList.length ;i++){
                        for (let j = 0 ;j < this.collegeComparedList.length ; j++){
                            if (this.recommendResultCollegeList[i].collegeName === this.collegeComparedList[j].collegeName){
                                // this.collegeComparedCollegeList[j] = this.recommendResultCollegeList[i]
                                this.collegeComparedCollegeList.push(this.recommendResultCollegeList[i])
                            }
                        }
                    }
                    if (this.collegeComparedCollegeList.length === this.collegeComparedList.length){
                        //展示开窗
                        this.collegeComparedVisible = true

                    }else{
                        this.$refs.multipleTable.clearSelection();
                        this.collegeComparedList = []
                        this.$notify.warning({title: '学校对比中有学校的信息不全', message: '请重新选择学校对比', duration: 2000});
                    }
                }
            },
            handleSelectionChange(val) {
                if (this.collegeComparedList.length <= 5){
                    this.multipleSelection = val;
                }else{
                    this.$notify.warning({title: '最多选择5个学校进行对比', message: '请重新选择学校对比', duration: 2000});
                }
            },
            selectRows(row){
                //多选择行
                if (row.length <= 5){
                    console.log(row)
                    this.collegeComparedList = row
                }else {
                    this.$refs.multipleTable.clearSelection();
                    this.collegeComparedList = []
                    this.$notify.warning({title: '最多选择5个学校进行对比', message: '请重新选择学校对比', duration: 2000});
                }
            },
            selectALLRows(){
                this.$refs.multipleTable.clearSelection();
                this.collegeComparedList = []
                this.$notify.warning({title: '最多选择5个学校进行对比', message: '请重新选择学校对比', duration: 2000});
            }
        },

    }
</script>

<style scoped>
    .recommend{
        border: rgb(241, 252, 252) solid 2px;
        margin: 50px 100px;
    }
    .el-button{
        font-family: 华文楷体;
        font-size: 18px;
        color: #555b5c;
        margin: 10px;
        float: left;
        border: none;
    }
    .el-button:hover{
        font-size: 19px;
        color: #5dabf7;
    }
    .el-divider__text{
        color: #5dabf7;
    }
    .recommendType{
        margin: 100px;
    }
    .recommendConditionDiv{
        margin: 100px;
    }
    .recommendCondition{
        margin: 20px;
        /*height: 100px;*/
        /*border: darkblue solid 1px;*/
    }

    .conditionProvince{
        margin-top: 20px;
    }
    span,p{
        font-family: 仿宋;
        font-size: 18px;
        color: #292b2b;
        margin: 10px;
    }
    .active{
        font-size: 20px;
        font-weight: 900;
        color: #5dabf7;
    }
    .province{
        font-family: 仿宋;
        font-size: 15px;
    }
    .recommendBtn{
        font-family: 华文楷体;
        font-size: 25px;
        /*background: #8f7ce3;*/
        color: #3d3434;
        margin: 80px;
        padding: 20px 80px;
        border: #5dabf7 solid 1px;
    }
    .recommendBtn:hover{
        font-size: 28px;
        color: #5dabf7;
    }
</style>